<template>
	<view class="page">
		<view class="card">
			<view class="card-title">选择图片：</view>
			<view class="card-body">
				<view class="images" v-for="item in totalImages" :key="item.id" @click="change(item)">
					<view class="images-check" v-if="item.check">
						<u-icon name="checkmark" color="#1677ff" size="15"></u-icon>
					</view>
					<view class="images-mask" v-if="item.check"></view>
					<image :src="item.img" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: {},
				selectImages: [],
				totalImages: [],
				code: '',
			}
		},
		onLoad(options) {
			this.code = options.code;
			this.data = JSON.parse(options.data);
			this.totalImages = JSON.parse(options.list);
			this.totalImages.forEach(item => {
				if(this.data.id == item.id) {
					this.$set(item,'check',true)
				} else {
					this.$set(item,'check',false);
				}
			})
			this.selectImages.push(this.data);
		},
		onNavigationBarButtonTap() {
			let images = [];
			this.totalImages.forEach(item => {
				if(item.check) images.push(item.img)
			})
			if(!images.length) {
				uni.showToast({
					title: '至少选择一张图片',
					icon: 'none'
				})
				return
			}
			let title = this.totalImages[0].name;
			uni.redirectTo({
				url: '/pages/community/edit?type=daily&images=' + JSON.stringify(images) + '&title=' + title + '&code=' + this.code
			})
		},
		methods: {
			change(v) {
				v.check = !v.check;
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		min-height: 100vh;
		background-color: #fff;
	}
	
	.card {
		padding-left: 20rpx;
		padding-right: 10rpx;
		background-color: #fff;
		
		&-title {
			font-size: 30rpx;
		}
		
		&-body {
			
		}
	}
	
	.images {
		position: relative;
		width: 230rpx;
		height: 160rpx;
		margin-right: 10rpx;
		display: inline-block;
		
		&-check {
			position: absolute;
			right: 10rpx;
			top: 10rpx;
			z-index: 3;
			background-color: #52c41a;
			padding: 5rpx;
			border-radius: 50%;
		}
		
		&-mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, .4);
			z-index: 2;
		}
		
		image {
			width: 100%;
			height: 100%;
		}
	}
</style>
